<!--
 * @Descripttion: 平台公告
 * @version: v1.0.0
 * @Author: 穆宏宇
 * @Date: 2021-01-26 13:09
 * @LastEditors: Administrator
 * @LastEditTime: 2021-01-26 13:09
-->
<template>
	<div class="row">
		<!-- <p class="title">优选商品<span>更多 ></span></p> -->
		<p class="title">优选商品</p>
		<div class="bestView">
			<div class="item" v-for="item in tableData" @click="goNav(item)">
				<img :src="item.goodsImagePath" />
				<p class="price" v-if="userId">￥{{item.goodsPrice}}</p>
				<p class="price" v-else>登录后可查看价格</p>
				<p class="detail"><span>{{item.itemType == 1?'【自营】':''}}</span>{{item.goodsName}}</p>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		searchByIds,
		tqualitygoodsgoodsList
	} from "@/api/mall.api";	
	export default {
		name: "bestView",
		components: {},
		props: {},
		data() {
			return {
				tableData: [],
				searchData: {
					pageNumber: 1,
					pageSize: 15,
				},
				total:0,
				// 最大屏数
				maxPageNumber:1,
				env: process.env.NODE_ENV === 'development' ? 'dev' : 'pro',
				goodsArr:[],
				userId:this.$tools.localRead('userId'),
				// goodsArr:['31408484edd64d7598cc39096ec898e3','3e1c02dc5bfd4da19d68f2a3ca3830f7','3e9567f89731497a8d7c8132ca2d4b68','73f3640113bc4a87a052d7485810e543','8f7d90637cf5446e8b75d4028d3decce','2aedb7a0904845bd912ec9c92b4d2eea','80265fc21b374b0c991f849152d06cd4','902c06588a2441a79b24deed6d5369d2','f34398d63c2f47499fd1cd1f4cee8e9d','626ff3405a77485c90e90ea5266a86d8','46a6f105d0874f72b4f3aa94bead572a','ba3e81a34b0e428682c53dda91056bbb','2d956718e4024b1494376540206df437','fbeacb9899554723bde74c029da366ce','1f55d50ccc8640eaaa5b542df0470500'],
				
			}
		},
		computed: {},
		watch: {},
		filters: {},
		created() {
			    
		},
		mounted() {
			this.tqualitygoodsgoodsList();
			// this.getList();
		},
		methods: {
			tqualitygoodsgoodsList(){
				tqualitygoodsgoodsList().then(res => {
					this.goodsArr = res;
					this.getList();
				})
			},
			getList() {
				var that = this;
				if(this.searchData.pageNumber > this.maxPageNumber){
					that.$emit('changeBusy',0);
					return;
				}
				if(this.goodsArr.length == this.tableData.length){
					return;
				}
				this.searchData.ids = this.goodsArr.join(",");
				searchByIds(this.searchData).then(res => {
					that.tableData = that.tableData.concat(res.products);
					that.total = res.total;
					that.searchData.pageNumber++
					if(res.products.length == 0){
						that.$emit('changeBusy',0);
					}else{
						that.$emit('changeBusy');
					}
				})
				
			},
			goNav(item){
				this.$router.push({
					path:"/detail?id="+item.id
				})
			}
			
		},
	}
</script>

<style scoped lang="scss">
	.floor {
		width: 100%;
		overflow: hidden;

		.row {
			width: 100%;
			overflow: hidden;

			.title {
				background-image: url(../../../assets/mall-images/dot.png);
				background-repeat: no-repeat;
				background-size: 30px 30px;
				text-indent: 40px;
				background-position: 0 5px;
				height: 40px;
				line-height: 40px;
				font-weight: bolder;
				font-size: 22px;
				margin: 20px 0px;

				span {
					float: right;
					margin-right: 10px;
					font-weight: normal;
					font-size: 14px;
					cursor: pointer;
				}
			}
		}

		.bestView{
			width: 100%;
			overflow: hidden;
			background: #fff;
			.item{
				float: left;
				width: calc(20% - 14px);
				margin: 7px;
				cursor: pointer;
				border: 1px solid #ddd;
				padding-bottom: 10px;
				img{
					width: 200px;
					height: 200px;
					margin: 10px auto;
					display: block;
				}
				.price{
					color:red;
					font-size:16px;
					padding: 0 10px;
				}
				.detail{
					padding: 10px;
					height: 50px;
					overflow: hidden;
					span{
						color:red;
					}
				}
				
			}
			.item:hover{
				box-shadow: 0px 0 5px #ccc;
			}
		}

	}
</style>
